//查询所有题库
<template>
  <div class="exam">
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.name" placeholder="题库名称关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="deleteAll(tableChecked)">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加对话框-->
    <el-dialog
      title="新增试卷信息"
      :visible.sync="addVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="formAdd" :model="formAdd" label-width="80px">
          <el-form-item label="题库名称">
            <el-input v-model="formAdd.name"></el-input>
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="formAdd.creator" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="级别">
            <!-- <el-input v-model="formAdd.fid"></el-input> -->
            <el-select v-model="formAdd.fid" placeholder="请选择">
              <el-option
                v-for="item in fids"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left" >{{ item.name }}</span>
                <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span> -->
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd()">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="pagination" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" fixed="left" prop="id" label="" width="80"></el-table-column>
      <el-table-column type="index" :index="indexMethod" label="序号" width="180"></el-table-column>
      <el-table-column prop="name" label="试卷名称分类" width="250"></el-table-column>
      <el-table-column prop="creator" label="创建人" width="200"></el-table-column>
      <el-table-column prop="update_time" label="最新修改时间" width="280"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row.id)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框-->
    <el-dialog
      title="编辑试卷信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="id">
            <el-input v-model="form.id" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="题库名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="form.creator" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <pagination v-bind:child-msg="pageparm" @callFather="callFather"></pagination>
  </div>
</template>

<script>
import loginVue from '../common/login.vue';
import pagination from '../common/pagination.vue';
export default {
  components: { pagination },
  data() {
    return {
      form: {}, //修改里保存点击以后当前试卷的信息
      formAdd:{
        name:'',
        fid:'',
        creator:'',
      },//新增里
      tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值
      ids:[],//批量删除id
      user:'',//用户名
      fids:[],//fid
      
      pagination: [],//列表信息
      total:0,
      dialogVisible: false,
      addVisible:false,
      formInline: {
        name:"",
        status:"",
        page: 1,
        limit: 5,
      },
      //分页参数
      pageparm:{
        currentPage: 1,
        pageSize: 5,
        total: 10
      },
    }
  },
  created() {
    // this.getTotalNumber();
    this.getdata()
    this.getUsername()
  },
  methods: {
    //获取用户名
    getUsername(){
      this.user = JSON.parse(window.localStorage.getItem('userdata')).username
      this.formAdd.creator = this.user
      //console.log("超=",this.formAdd.creator);
    },

    //序号处理
    indexMethod(index) {
      return (
        (this.pageparm.currentPage - 1) * this.pageparm.pageSize + index + 1
      );
    },
    handleSelectionChange(val) {//checkbox获取行信息
        console.log("handleSelectionChange--",val)
        this.tableChecked = val
      },
    //批量删除
    deleteAll(tableChecked) {
      console.log("超",tableChecked);
      console.log("选中的值",tableChecked.map((item) => item.id));
      let ids = tableChecked.map((item) => item.id);
      console.log("ids",ids);
      
      //console.log("tostring",ids.toString());
      this.$confirm("确定删除该记录吗,该操作不可逆！！！","删除提示",{
        confirmButtonText: '确定删除',
        cancelButtonText: '算了,留着',
        type: 'danger'
      }).then(()=> { //确认删除
        //let ids = this.tableChecked.map((item) => item.id);
        
        this.$axios({
          url:'/api/examMenu/deleteMany', 
          data:{ids},
          method:'post',
          }).then(res => {
          this.selectByType()
        })
      }).catch(() => {

      })
    },

    // 获取题库列表
    getdata() {
      this.loading = true
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // deptList(parameter)
      this.$axios.get('/api/examMenu/findAll/'+this.pageparm.currentPage+'/'+this.pageparm.pageSize)
        .then(res => {
          console.log(res);
          this.loading = false
          if (res.data.code == 200) {
            this.$message({
              type: 'info',
              message: res.data.message
            })
            this.pagination = res.data.data.list
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.data.data.total
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('用户加载失败，请稍后再试！')
        })
    },
     // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.pageparm.currentPage = this.formInline.page;
      this.pageparm.pageSize = this.formInline.limit;
      // console.log(this.question);
      this.selectByType();
    },

    //判断切换页码时，是什么查询法
    selectByType() {
      if (this.formInline.name) {
        this.search();
      } else {
        this.getdata();
      }
    },

    findAll(){
      this.$axios.get("/api/examMenu/clcAdd").then((res)=>{
        console.log(res);
        if (res.data.code==200) {
          this.pagination = res.data.data
        } else {
          
        }
      }).catch(()=>{});

    }, 
    // getTotalNumber(){//查询总条数
    //   this.$axios.get("/paper_category/findAll/findTotalNumber").then((res)=>{
    //     console.log(res);
    //     if (res.data.code==200) {
    //       this.total = res.data.data
    //     } else {
          
    //     }
    //   }).catch(()=>{});
    // },
    getPaperClassInfo() { //分页查询所有试卷信息
      this.$axios(`/examMenu/findAll/${this.pagination.current}/${this.pagination.size}`).then(res => {
        this.pagination = res.data.data
      }).catch(error => {
      })
    },
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val
      this.getPaperClassInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getPaperClassInfo()
    },
    add(){
      this.addVisible = true
      this.$axios.get("/api/examMenu/clcAdd").then(res => { //查找fid
        if(res.data.code == 200) {
          this.fids = res.data.data
          console.log("fids",this.fids);
          //this.fids = res.data.data
          // console.log("fids:",this.fids);
          //this.formAdd.fid = this.fids
          //console.log("fid:",this.formAdd.fid);
        }
      })
    },
    edit(id) { //编辑试卷
      console.log("点击编辑" + id);
      console.log(id);
      this.dialogVisible = true
      this.$axios.get("/api/examMenu/findById/" + id).then(res => { //根据试卷id请求后台
        if(res.data.code == 200) {
          this.form = res.data.data
        }
      })
    },
    handleClose(done) { //关闭提醒
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        }).catch(_ => {});
    },
    submit() { //提交修改后的试卷信息
      this.dialogVisible = false
      this.$axios({
        url: '/api/examMenu/updateOne',
        method: 'put',
        data: {
          ...this.form
        }
      }).then(res => {
        if(res.data.code == 200) {
          this.$message({ //成功修改提示
            message: '更新成功',
            type: 'success'
          })
        }
        this.selectByType()
      })
    },
    submitAdd(){//新增里面的提交
      this.addVisible = false
      if (this.formAdd.name==null) {
        this.$message({ //成功添加提示
              message: '分类名称不能为空',
              type: 'warning'
            })
      } else{
        this.$axios({
        url: '/api/examMenu/addOne',
        method: 'post',
        data: {
          ...this.formAdd
        }
      }).then(res => {
        if(res.data.code == 200) {
          this.$message({ //成功修改提示
            message: '新增成功',
            type: 'success'
          })
        }
        this.selectByType()
        })
      }
    },
    deleteRecord(id) {
      console.log(id);
      this.$confirm("确定删除该记录吗,该操作不可逆！！！","删除提示",{
        confirmButtonText: '确定删除',
        cancelButtonText: '算了,留着',
        type: 'danger'
      }).then(()=> { //确认删除
        this.$axios({
          url: '/api/examMenu/deleteOne/'+ id,
          method: 'delete',
        }).then(res => {
          this.selectByType()
        })
      }).catch(() => {

      })
    },
    search() {
      console.log("name:",this.formInline.name);
      let str = this.formInline.name
      this.$axios({
        url:"/api/examMenu/findBySearch/" + this.pageparm.currentPage + '/' + this.pageparm.pageSize,
        method:'post',
        data:{
          str
        },
        header:{
          'Content-Type': 'text/html; charset=utf-8'
        },
      }).then(res => {
        if(res.data.code == 200) {
          //console.log("res:",res);
          this.pagination = res.data.data.list
          console.log("thispaper",this.pagination);
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page;
          this.pageparm.pageSize = this.formInline.limit;
          this.pageparm.total = res.data.data.total;
          // let newPage = allExam.filter(item => {
          //   return item.list.includes(this.key)
          // })
          // this.pagination.records = newPage
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.user-search {
  margin-top: 20px;
}
.exam {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit {
    margin-left: 20px;
  }
  .el-table tr {
    background-color: #DD5862 !important;
  }
}
  .el-table .warning-row {
    background: #000 !important;
    
  }

  .el-table .success-row {
    background: #DD5862;
  }

</style>
